appDisplay: Slide page hints along page switching

When clicking on the page hints, the hint rectangles being visible
in place and not moving together with the page is a bit too
distracting.

Since the page hints are not part of the iconGrid hierarchy and
we have just 2 general ones for prev/next page (i.e. no page
associated), do this sliding via some smoke and mirrors: We don't
slide the page hints, but a parent container for both of them, and
we also control opacity so that the container is fully transparent
mid-page. At the point it is transparent, the container can be
snapped to the other side of the page, and faded back in as it
slides together with it, so it always looks like it goes away and
comes from the right sides.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1630>

diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index c0517a5f2413014783119d25a6d33921b7d8c070..94d1ef24e0702c4ba6af2cb30f73f1a2d32ef621 100644 (file)
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -175,7 +175,22 @@ var BaseAppView = GObject.registerClass({
         this._adjustment = scroll.adjustment;
         this._adjustment.connect('notify::value', adj => {
             this._updateFade();
-            this._pageIndicators.setCurrentPosition(adj.value / adj.page_size);
+            const value = adj.value / adj.page_size;
+            this._pageIndicators.setCurrentPosition(value);
+
+            const distanceToPage = Math.abs(Math.round(value) - value);
+            if (distanceToPage < 0.001) {
+                this._hintContainer.opacity = 255;
+                this._hintContainer.translationX = 0;
+            } else {
+                this._hintContainer.remove_transition('opacity');
+                let opacity = Math.clamp(
+                    255 * (1 - (distanceToPage * 2)),
+                    0, 255);
+
+                this._hintContainer.translationX = (Math.round(value) - value) * adj.page_size;
+                this._hintContainer.opacity = opacity;
+            }
         });
 
         // Page Indicators
@@ -239,13 +254,20 @@ var BaseAppView = GObject.registerClass({
             x_align: Clutter.ActorAlign.START,
         });
 
+        this._hintContainer = new St.Widget({
+            layout_manager: new Clutter.BinLayout(),
+            x_expand: true,
+            y_expand: true,
+        });
+        this._hintContainer.add_child(this._prevPageIndicator);
+        this._hintContainer.add_child(this._nextPageIndicator);
+
         const scrollContainer = new St.Widget({
             layout_manager: new Clutter.BinLayout(),
             clip_to_allocation: true,
             y_expand: true,
         });
-        scrollContainer.add_child(this._prevPageIndicator);
-        scrollContainer.add_child(this._nextPageIndicator);
+        scrollContainer.add_child(this._hintContainer);
         scrollContainer.add_child(this._scrollView);
         scrollContainer.add_child(this._nextPageArrow);
         scrollContainer.add_child(this._prevPageArrow);